<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <title>同类基金排名</title>
  <link rel="stylesheet" href="../css/fund.css" />
  <style>
    canvas {
      height: 46.4vw;
    }
    .chart-header-wrapper {
      width: 100%;
      height: 12vw;
      line-height: 12vw;
      vertical-align: middle;
      font-size: 3.2vw;
      color: #808080;
      padding: 0 4.267vw;
    }

    .header-item {
      float: left;
    }

    .header-item:nth-child(1) {
      width: 40%;
    }

    .header-item:nth-child(2) {
      width: 35%;
    }

    .header-item:nth-child(3) {
      width: 25%;
    }

    #chartTooltip {
      visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
      height: 8vw;
      line-height: 8vw;
      background: #E9F1FF;
      z-index: 10;
      transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1);
    }
  </style>
  <script src="../js/f2-all.min.js"></script>
  <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
</head>

<body>
  <div class="chart-card">
    <div class="chart-card-title">
      同类排名
    </div>
    <!-- Content here -->
    <div class="chart-container">
      <div class="chart-header-wrapper" id="chartTooltip">
        <div class="header-item">
          <span class="item-value" data-type="time">--</span>
        </div>
        <div class="header-item" style="float: right;text-align: right">
          <span>排名:</span>
          <span class="item-value" data-type="value">--</span>
        </div>
      </div>
      <div class="chart-header-wrapper" id="chartLegend">
        <div class="header-item">
          <span class="item-value">2016-12-28（昨日）</span>
        </div>
        <div class="header-item" style="text-align: center;">
          <span>同类排名:</span>
          <span class="item-value">
            <span style="color: rgba(0, 0, 0, 0.85)">234</span>
            <span style="color: rgba(0, 0, 0, 0.45)">/300</span>
          </span>
        </div>
        <div class="header-item" style="padding-right: 0;">
          <span>排名变动:</span>
          <span class="item-value" style="color: #F5222D">+217</span>
        </div>
      </div>
      <!-- 图表主题 -->
      <canvas id="mountNode"></canvas>
      <!-- 时间切换 按钮 -->
      <div class="tab">
        <button class="time-button button-25 active" id="one-month">近 1 月</button>
        <button class="time-button button-25" id="three-month">近 3 月</button>
        <button class="time-button button-25" id="six-month">近 6 月</button>
        <button class="time-button button-25" id="one-year">近 1 年</button>
      </div>
    </div>
  </div>

  <table class="table">
    <thead>
      <tr>
        <th scope="col">时间</th>
        <th scope="col">涨幅</th>
        <th scope="col">同类平均</th>
        <th scope="col">同类排行</th>
        <th scope="col">排名变动</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>近一周</td>
        <td class="green">-1.47%</td>
        <td class="green">-4.37%</td>
        <td>189/2809</td>
        <td>23</td>
      </tr>
      <tr>
        <td>近一月</td>
        <td class="red">+0.26%</td>
        <td class="green">-5.37%</td>
        <td>167/2815</td>
        <td>12</td>
      </tr>
      <tr>
        <td>近三月</td>
        <td class="red">+1.32%</td>
        <td class="green">-8.96%</td>
        <td>96/2757</td>
        <td>123</td>
      </tr>
      <tr>
        <td>近六月</td>
        <td class="red">+1.22%</td>
        <td class="green">-7.96%</td>
        <td>269/2566</td>
        <td>100</td>
      </tr>
      <tr>
        <td>近一年</td>
        <td class="red">+1.97%</td>
        <td class="green">-4.86%</td>
        <td>567/2343</td>
        <td>34</td>
      </tr>
     <tr>
        <td>近两年</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
      </tr>
      <tr>
        <td>近三年</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
      </tr>
      <tr>
        <td>近五年</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
        <td>--</td>
      </tr>
    </tbody>
  </table>

  <script>
    var Chart = F2.Chart;
    var Util = F2.Util;
    var Animate = F2.Animate;
    // 自定义线图变更动画
    Animate.registerAnimation('lineUpdate', function(updateShape, animateCfg) {
      var cacheShape = updateShape.get('cacheShape'); // 该动画 shape 的前一个状态
      var cacheAttrs = cacheShape.attrs; // 上一个 shape 属性
      var geomType = cacheShape.geomType; // 图形类型

      var oldPoints = cacheAttrs.points; // 上一个状态的关键点
      var newPoints = updateShape.attr('points'); // 当前 shape 的关键点

      var oldLength = oldPoints.length;
      var newLength = newPoints.length;
      var deltaLength = geomType === 'area' ? (oldLength - newLength) / 2 : oldLength - newLength;

      if (deltaLength > 0) {
        var firstPoint = newPoints[0];
        var lastPoint = newPoints[newPoints.length - 1];

        for (var i = 0; i < deltaLength; i++) {
          newPoints.splice(0, 0, firstPoint);
        }

        if (geomType === 'area') {
          for (var j = 0; j < deltaLength; j++) {
            newPoints.push(lastPoint);
          }
        }
      } else {
        deltaLength = Math.abs(deltaLength);
        var firstPoint1 = oldPoints[0];
        var lastPoint1 = oldPoints[oldPoints.length - 1];

        for (var k = 0; k < deltaLength; k++) {
          oldPoints.splice(0, 0, firstPoint1);
        }

        if (geomType === 'area') {
          for (var p = 0; p < deltaLength; p++) {
            oldPoints.push(lastPoint1);
          }
        }

        cacheAttrs.points = oldPoints;
      }
      updateShape.attr(cacheAttrs);
      updateShape.animate().to(Util.mix({
        attrs: {
          points: newPoints
        }
      }, animateCfg));
    });

    var rankTickMap = {
      'one-month': {
        ticks: [ 1, 5, 10, 15, 20 ]
      },
      'three-month': {
        ticks: [ 1, 100, 200, 300, 400 ]
      },
      'six-month': {
        ticks: [ 1, 600, 1200, 1800, 2400 ]
      },
      'one-year': {
        ticks: [ 1, 800, 1600, 2400, 3200]
      }
    };
    var chart = new Chart({
      id: 'mountNode',
      pixelRatio: window.devicePixelRatio,
      padding: [14, 'auto', 'auto']
    });

    // 处理数据
    $.getJSON('./data/rank/one-month.json', function(data) {
      chart.source(data, {
        date: {
          type: 'timeCat',
          tickCount: 3,
          range: [0, 1]
        },
        rank: Util.mix({
          scale: function(value) {
            if (value === null || value === undefined) {
              return NaN;
            }
            var max = this.max;
            var min = this.min;
            if (max === min) {
              return 0;
            }

            var percent = (value - min) / (max - min);
            var rangeMin = this.rangeMin();
            var rangeMax = this.rangeMax();
            return 1 - (rangeMin + percent * (rangeMax - rangeMin));
          }
        }, rankTickMap['one-month'])
      });

      chart.axis('date', {
        label: function(text, index, total) {
          var cfg = {
            textAlign: 'center'
          };
          if (index === 0) {
            cfg.textAlign = 'start';
          } else if (index === (total - 1)) {
            cfg.textAlign = 'end';
          }

          var arr = text.split('-');
          if (arr[0] === '2018') {
            cfg.text = arr[1] + '-' + arr[2];
          }
          return cfg;
        }
      });
      chart.axis('rank', {
        grid: function(text, index, total) {
          if (text === '1') {
            return {
              lineDash: null,
              stroke: '#D8D8D8'
            }
          }
        },
        label: function(text, index, total) {
          if (text === '1') {
            return {
              fill: '#252525'
            }
          }
          return {};
        }
      });

      chart.tooltip({
        showCrosshairs: true,
        crosshairsStyle: {
          stroke: '#CAD7EF'
        },
        custom: true,
        onChange: function(obj) {
          var items = obj.items;
          var date = items[0].origin.date;
          var rank = items[0].origin.rank;

          $('#chartTooltip .item-value').each(function(index, ele) {
            var type = $(ele).data('type');
            if (type === 'time') {
              $(ele).text(date);
            } else if (type === 'value') {
              $(ele).text(rank);
            }
          });

          $('#chartTooltip').css('visibility', 'visible');
        },
        onHide: function() {
          $('#chartTooltip').css('visibility', 'hidden');
        }
      });
      chart.line().position('date*rank').animate({
        update: {
          animation: 'lineUpdate'
        }
      });
      chart.render();
    });

    // button 点击操作
    $('.tab button').click(function(e) {
      var target = $(e.target);
      var id = target.attr('id');
      if (target.hasClass('active')) {
        return;
      }

      var currentActive = $('.tab').find('button.active');
      currentActive.removeClass('active');
      target.addClass('active');

      var url = `./data/rank/${id}.json`;
      $.getJSON(url, function(json) {
        if (id === 'one-month') {
          chart.scale('rank', Util.mix({
            scale: function (value) {
              if (value === null || value === undefined) {
                return NaN;
              }
              var max = this.max;
              var min = this.min;
              if (max === min) {
                return 0;
              }

              var percent = (value - min) / (max - min);
              var rangeMin = this.rangeMin();
              var rangeMax = this.rangeMax();
              return 1 - (rangeMin + percent * (rangeMax - rangeMin));
            }
          }, rankTickMap['one-month']));
        } else {
          chart.scale('rank', Util.mix({
            scale: function (value) {
              if (value === null || value === undefined) {
                return NaN;
              }
              var max = this.max;
              var min = this.min;
              if (max === min) {
                return 0;
              }

              var percent = (value - min) / (max - min);
              var rangeMin = this.rangeMin();
              var rangeMax = this.rangeMax();
              return 1 - (rangeMin + percent * (rangeMax - rangeMin));
            }
          }, rankTickMap[id]));
        }
        chart.changeData(json);
      });
    });
  </script>
</body>

</html>
